<template>
  <div id="customer-passengers">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item">
          <router-link to="/customers">企业客户</router-link>
        </li>
        <li class="breadcrumb-item">
          <router-link to="/passengers">员工信息</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">机票私有政策</li>
      </ol>
    </nav>
    <div class="row text-center">
      <div class="col">
        <button
          class="btn btn-primary ms-auto me-auto"
          @click.stop="savePassengerPolicy()"
        >
          保存关联
        </button>
      </div>
    </div>
    <div class="row">
      <div class="card col-6 bg-transparent">
        <div class="card-header my-1 py-1">
          <form class="row">
            <div class="col">
              <input
                class="form-control"
                size="10"
                placeholder="姓名"
                name="sc.name"
                v-model.trim="searchName"
              />
            </div>
            <div class="col">
              <input
                class="form-control"
                size="10"
                placeholder="手机号"
                v-model.trim="mobile"
              />
            </div>
            <div class="col">
              <my-select-customer
                :customerId.sync="customerId"
                :status="1"
              ></my-select-customer>
            </div>
            <div class="col">
              <select
                class="form-select"
                v-model.number="sc.pageSize"
              >
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="200">200</option>
                <option value="500">500</option>
              </select>
            </div>
            <div class="col">
              <button
                type="button"
                class="btn btn-primary ms-1"
                @click="search()"
              >
                查找
              </button>
              <button
                type="button"
                class="btn btn-secondary btn-sm ms-1"
                title="清空查找条件"
                @click="reset()"
              >
                重置
              </button>
            </div>
          </form>
        </div>
        <table
          class="table table-striped table-hover table-sm"
          id="passengerList"
        >
          <thead>
            <tr>
              <th>中文名</th>
              <th>VIP</th>
              <th>手机</th>
              <th>公司</th>
              <th></th>
              <th>选择</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="6">
                <button
                  @click.stop="uncheckAll()"
                  class="btn btn-sm btn-secondary ms-1"
                >
                  全不选
                </button>
                <button
                  @click.stop="checkAll()"
                  class="btn btn-sm btn-primary ms-1"
                >
                  全选
                </button>
              </td>
            </tr>
            <tr v-for="(info, index) in psgList" :key="index">
              <td>{{ info.nameCn }}</td>
              <td>
                <span class="text-danger" v-if="info.vipLevel > 0"
                  >VIP-{{ info.vipLevel }}</span
                >
              </td>

              <td>{{ info.mobile }}</td>
              <td>
                {{ showCustomerName(info) }}
              </td>
              <td>
                <router-link :to="`/passenger/` + info.id" target="_blank"
                  >详情</router-link
                >
              </td>
              <td>
                <input type="checkbox" :value="info.id" v-model="psgIds" />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="card-body">
          <nav id="pagination-box-1" class="float-end">
            <my-pagination
              name="pagination"
              :row-count="sc.rowCount"
              :page-total="sc.pageTotal"
              :page-no="sc.pageNo"
              @next-page="nextPage"
              @prev-page="prevPage"
              @direct-page="directPage"
            ></my-pagination>
          </nav>
        </div>
      </div>

      <div class="card col-6 bg-transparent">
        <div class="card-header my-1 py-1">
          <form class="row row-cols-lg-auto align-items-center">
            <div class="col">
              <input
                type="textfield"
                class="form-control"
                placeholder="航空公司"
                v-model.trim="carrier0"
              />
            </div>
            <div class="col">
              <input
                type="textfield"
                class="form-control"
                placeholder="舱位"
                v-model.trim="subclass0"
              />
            </div>
            <label>状态</label>
            <div class="col">
              <select class="form-select" v-model.number="status0">
                <option value="-1">全部状态</option>
                <option value="0">停用</option>
                <option value="1">启用</option>
              </select>
            </div>
            <div class="col">
              <select class="form-select" v-model.number="sc1.pageSize">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
              </select>
            </div>
            <div class="col">
              <button
                type="button"
                class="btn btn-primary ms-2"
                @click.stop="search1()"
              >
                查找
              </button>
              <button
                type="button"
                class="btn btn-secondary btn-sm ms-2"
                @click.stop="reset1()"
              >
                重置
              </button>
            </div>
          </form>
        </div>
        <table class="table table-striped table-hover table-sm">
          <thead>
            <tr>
              <th class="text-center">选择</th>
              <th class="text-center">政策编号</th>
              <th class="text-center">航司</th>
              <th class="text-center">大客户代码</th>
              <th class="text-center">白名单</th>
              <th class="text-center">内部备注</th>
              <th class="text-center bg-success">生效日期</th>
              <th class="text-center bg-warning">失效日期</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(info, index) in policyList"
              :key="index"
            >
              <td>
                <input type="checkbox" :value="info.id" v-model="policyIds" />
              </td>
              <td class="text-center">{{ info.policyCode }}</td>
              <td class="text-center">{{ info.carrier }}</td>
              <td class="text-center">{{ info.keyCustomerCode }}</td>
              <td class="text-center">
                <span v-if="info.whiteList === 0">不需要</span>
                <span v-else-if="info.whiteList === 1">需要</span>
                <span v-else>?</span>
              </td>
              <td class="text-center">{{ info.privateMemo }}</td>
              <td class="text-center">{{ info.effectDate }}</td>
              <td class="text-center">{{ info.expireDate }}</td>
            </tr>
          </tbody>
        </table>
        <div class="card-body">
          <nav id="pagination-box-2" class="float-end">
            <my-pagination
              name="pagination1"
              :row-count="sc1.rowCount"
              :page-total="sc1.pageTotal"
              :page-no="sc1.pageNo"
              @next-page="nextPage1"
              @prev-page="prevPage1"
              @direct-page="directPage1"
            ></my-pagination>
          </nav>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { showCustomerName } from "@/common/common";
import { searchPassengers } from "@/api/user";
import $ from "jquery";
import MyPagination from "@/components/my-pagination.vue";
import MySelectCustomer from "@/components/my-select2-customer.vue";
import {
  searchKeyCustomerPolicies,
  savePassengerFlightPolicy,
} from "@/api/basic-data";
import { reviewBillInfoPassed } from "@/api/bill";

export default {
  name: "passengers",
  components: {
    MyPagination,
    MySelectCustomer,
  },
  data() {
    return {
      psgList: [],
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      searchName: "",
      mobile: "",
      customerId: -1,

      policyList: [],
      sc1: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      carrier0: "",
      subclass0: "",
      status0: -1,
      orderBy: 0,

      psgIds: [],
      policyIds: [],
    };
  },
  watch: {
    psgIds: function () {
      console.log(this.psgIds);
    },
    policyIds: function () {
      console.log(this.policyIds);
    },
  },
  mounted: function () {
    this.search();
    this.search1();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", {
        loading: false,
      });
    },
    savePassengerPolicy: function () {
      savePassengerFlightPolicy(
        {
          passengerIds: this.psgIds,
          policyIds: this.policyIds,
        },
        (v) => {
          console.log(v);
          if (v.status === "OK") {
            this.showErrMsg("保存成功：" + v.desc);
          } else {
            this.showErrMsg("保存失败：" + v.errmsg, "danger");
          }
        }
      );
    },
    search: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.name": this.searchName,
        "sc.mobile": this.mobile,
        "sc.customerId": this.customerId,
      };
      // this.showLoading('查询中...')
      searchPassengers(params, (jsonResult) => {
        this.psgList = jsonResult.dataList;
        this.sc = jsonResult.page;
        // this.hideLoading()
      });
    },
    search1: function () {
      const params = {
        "sc.pageNo": this.sc1.pageNo,
        "sc.pageSize": this.sc1.pageSize,
        "sc.carrier": this.carrier0,
        "sc.subclass": this.subclass0,
        "sc.status": this.status0,
        "sc.orderBy": this.orderBy,
      };
      searchKeyCustomerPolicies(params, (jsonResult) => {
        this.policyList = jsonResult.dataList;
        this.sc1 = jsonResult.page;
      });
    },
    reset: function () {
      this.searchName = "";
      this.sc.pageNo = 1;
      this.search();
    },
    reset1: function () {
      this.carrier0 = "";
      this.subclass0 = "";

      this.sc.pageNo = 1;
    },
    showCustomerName: function (info) {
      return showCustomerName(info);
    },
    checkAll: function () {
      const self = this;
      this.psgIds = [];
      this.psgList.forEach(function (item) {
        self.psgIds.push(item.id);
      });
      // this.caclTotal()
    },
    uncheckAll: function () {
      this.psgIds = [];
      // this.resetTotal()
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
    prevPage1: function () {
      this.sc1.pageNo = this.sc1.pageNo - 1;
      if (this.sc1.pageNo < 1) this.sc1.pageNo = 1;
      this.search1();
    },
    nextPage1: function () {
      this.sc1.pageNo = this.sc1.pageNo + 1;
      this.search1();
    },
    directPage1: function (pageNo) {
      this.sc1.pageNo = pageNo;
      this.search1();
    },
  },
};
</script>
